<template>
  <div class="row-right">
    <div class="row">
      <div class="col-sm-4 col-xs-6" v-if="!file">
        <a href="javascript:;" class="up-box">
          <img src="../assets/images/icon_add.png" alt="" width="100%">
          <input type="file" class="up-input" @change="handleFileChange($event)">
        </a>
      </div>
      <template v-else>
        <span>{{file.name}}</span>
        <button class="btn btn-default" @click="file=''" style="margin:0px 20px">取消</button>
        <button class="btn-ghost" @click="handleUploadFile($event)">保存</button>
      </template>
    </div>
    <div class="row section-header" style="margin:50px 0px 30px;">
      <h4>我上传的文件</h4>
      <!-- /curriculum/shareFileList  -->
      <ul class="nav nav-pills">
        <li role="presentation" style="margin-right: 40px">
          <p>
            <a href="javascript:;" :class="{'text-primary':fileType=='','text-black':fileType!=''}" @click="fileType=''">全部</a>
          </p>
        </li>
        <li role="presentation" style="margin-right: 40px">
          <p>
            <a href="javascript:;" :class="{'text-primary':fileType==2,'text-black':fileType!=2}" @click="fileType=2">文档</a>
          </p>
        </li>
        <li role="presentation" style="margin-right: 40px">
          <p>
            <a href="javascript:;" :class="{'text-primary':fileType==3,'text-black':fileType!=3}" @click="fileType=3">模型</a>
          </p>
        </li>
        <li role="presentation">
          <p>
            <a href="javascript:;" :class="{'text-primary':fileType==1,'text-black':fileType!=1}" @click="fileType=1">压缩</a>
          </p>
        </li>
      </ul>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="table-responsive">
          <div class="file-table">
            <table class="table">
              <tr v-for="(item,index) in fileList" :key="item">
                <td>{{item.fileName}}</td>
                <td>{{timestampToTime(item.createTime)}}</td>
                <td>
                  <a href="javascript:;" class="text-primary" @click="handleDownload(item.id)">点击下载</a>
                </td>
                <td class="text-right">
                  <a href="javascript:;" class="text-danger" @click="handleDetele(item.id,index)">点击删除文件</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="row text-center load-more" v-if="loadShow">
          <a href="javascript:;" @click="fetchMoreData()">加载更多</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import util from '@/assets/js/utils.js'
// @ is an alias to /src
import expertItem from '@/components/Expert-Item.vue'
export default {
  name: 'course',
  data () {
    return {
      fileType: '',
      fileList: [],
      file: '',
      loadShow: true,
      pageNum: 0
    }
  },
  components: {
    expertItem
  },
  created () {
    this.fetchFileList()
  },
  watch: {
    fileType () {
      this.handleInitPage()
      this.fetchFileList()
    }
  },
  methods: {
    handleInitPage () {
      this.fileList = []
      this.loadShow = true
      this.pageNum = 0
    },
    handleFileChange (event) {
      this.file = event.target.files[0]
      console.log(this.file)
    },
    handleUploadFile (event) {
      //上传
      let that = this
      event.preventDefault()
      let formData = new FormData()
      formData.append('file', this.file)
      formData.append('type', 1)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios
        .post('/curriculum/addShareFile', formData, config)
        .then(function (response) {
          if (response.data.suc == 200) {
            alert('上传成功')
            that.file = null
            that.fetchFileList()
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleDownload (id) {
      let that = this
      axios
        .post(
          '/curriculum/downloadShare',
          qs.stringify({
            id: id
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            window.open(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    fetchFileList () {
      //资源
      let that = this
      axios
        .post(
          '/curriculum/shareFileList',
          qs.stringify({
            type: that.fileType,
            from: that.pageNum,
            own: 'true'
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.fileList = that.fileList.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleDetele (id, index) {
      //删除
      if (confirm('确认删除？')) {
        let that = this
        axios
          .post(
            '/curriculum/deleteShare',
            qs.stringify({
              id: id
            })
          )
          .then(function (response) {
            if (response.data.suc == 200) {
              alert('删除成功')
              that.fileList.splice(index, 1)
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    timestampToTime (time) {
      return util.timestampToTime(time)
    },
    fetchMoreData () {
      // 加载更多
      this.pageNum += 1
      this.fetchFileList()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
